
<!-- 第一个图表 -->
<template>
  <div class="chart-wrapper">
    <!-- <h3>电池今日功率曲线图</h3> -->
    <div ref="chartContainer" class="chart-container" :style="{ width: chartWidth, height: chartHeight }"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'BatteryPowerChart',
  props: {
    // 图表宽度，支持百分比或具体像素值
    chartWidth: {
      type: String,
      default: '100%'
    },
    // 图表高度，支持百分比或具体像素值
    chartHeight: {
      type: String,
      default: '100%'
    },
   
    // 标题文字大小（如果启用标题）
    titleFontSize: {
      type: String,
      default: '10px'
    },
    // 标题文字颜色（如果启用标题）
    titleColor: {
      type: String,
      default: '#333'
    },
    // 左刻度标签文字大小
    axisLabelFontSize: {
      type: String,
      default: '8px'
    },
    // 左刻度标签颜色
    leftAxisLabelColor: {
      type: String,
      default: '#409EFF'
    },
    // 右刻度标签颜色
    rightAxisLabelColor: {
      type: String,
      default: '#FFB800'
    },
    // 左右刻度标签颜色
    // axisTickColor: {
    //   type: String,
    //   default: '#fff'
    // },
    // 图表上边距，用于调整图表在容器中的位置
    gridTop: {
      type: String,
      default: '8%'
    },
    // 提示框内边距
    tooltipPadding: {
      type: Number,
      default: 3
    },
   // 提示框文字大小
   tooltipFontSize: {
      type: Number,
      default: 8
    },
    // 提示框背景色
    tooltipBackground: {
      type: String,
      default: 'rgb(58, 67, 194, 0.6)'
    },
    // 提示框文字颜色
    tooltipTextColor: {
      type: String,
      default: '#fff'
    },
    // 提示框边框颜色
    tooltipBorderColor: {
      type: String,
      default: '#5470c6'
    },
    // 提示框边框宽度
    tooltipBorderWidth: {
      type: Number,
      default: 1
    },
    // 图表下边距，用于调整图表在容器中的位置
    gridBottom: {
      type: String,
      default: '2%'
    },
    // 图表左边距，用于调整图表在容器中的位置
    gridLeft: {
      type: String,
      default: '2%'
    },
    // 图表右边距，用于调整图表在容器中的位置
    gridRight: {
      type: String,
      default: '2%'
    },
    // 折线图线条颜色
    lineColor: {
      type: String,
      default: '#409EFF'
    },
    // 折线图线条宽度
    lineWidth: {
      type: Number,
      default: 2
    },
    // 是否显示数据点标记
    showSymbol: {
      type: Boolean,
      default: true
    },
    // 数据点标记的大小
    symbolSize: {
      type: Number,
      default: 4
    },
    // 是否启用平滑曲线
    smooth: {
      type: Boolean,
      default: true
    },
    // Y轴最小值，为null时自动计算
    yAxisMin: {
      type: Number,
      default: null
    },
    // Y轴最大值，为null时自动计算
    yAxisMax: {
      type: Number,
      default: null
    },
    // X轴分割线数量
    xAxisSplitNumber: {
      type: Number,
      default: 8
    },
    // Y轴分割线数量
    yAxisSplitNumber: {
      type: Number,
      default: 10
    },
    // 是否显示X轴分割线
    showXAxisSplitLine: {
      type: Boolean,
      default: true
    },
    // 是否显示Y轴分割线
    showYAxisSplitLine: {
      type: Boolean,
      default: true
    },
    // 分割线颜色
    splitLineColor: {
      type: String,
      default: 'rgba(255, 255, 255, 0.07)'
    },
    // 电量单位
    batteryUnit: {
      type: String,
      default: 'kWh'
    },
    // 功率单位
    powerUnit: {
      type: String,
      default: 'W'
    },
    // 是否在右侧刻度显示单位
    showAxisUnit: {
      type: Boolean,
      default: false
    },
  },
  mounted() {
    this.renderChart();
    window.addEventListener('resize', this.handleResize);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    renderChart() {
      const chart = echarts.init(this.$refs.chartContainer, null, {
        width: 'auto',
        height: 'auto',
        renderer: 'canvas'
      });

      // 给canvas添加边框样式
      const canvas = this.$refs.chartContainer.querySelector('canvas');
      if (canvas) {
        canvas.style.border = '1px solid #ccc';
      }

      const option = {
        // title: {
        //   // text: '今日功率曲线',
        //   textStyle: {
        //     fontSize: this.titleFontSize,
        //     color: this.titleColor
        //   }
        // },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: this.tooltipFontSize,
            lineHeight: 8,
            color: this.tooltipTextColor
          },
          padding: this.tooltipPadding,
          backgroundColor: this.tooltipBackground,
          borderColor: this.tooltipBorderColor,
          borderWidth: this.tooltipBorderWidth,
          extraCssText: 'white-space: pre-wrap; word-break: break-all;',
          formatter: function(params) {
            let result = params[0].name + '\n';
            params.forEach(param => {
              if (param.seriesName === '电量') {
                result += param.seriesName + ': ' + param.value + ' ' + this.batteryUnit + '\n';
              } else {
                result += '功率: ' + param.value + ' ' + this.powerUnit + '\n';
              }
            });
            return result;
          }.bind(this)
        },
        grid: {
          top: this.gridTop,
          bottom: this.gridBottom,
          left: this.gridLeft,
          right: this.gridRight,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [
            '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
            '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'
          ],
          axisLabel: {
            fontSize: this.axisLabelFontSize,
            color: this.leftAxisLabelColor
          },
          splitLine: {
            show: this.showXAxisSplitLine,
            lineStyle: {
              color: this.splitLineColor
            }
          },
          splitNumber: this.xAxisSplitNumber
        },
        yAxis: [
          {
            type: 'value',
            min: this.yAxisMin,
            max: this.yAxisMax,
            axisLabel: {
              fontSize: this.axisLabelFontSize,
              color: this.leftAxisLabelColor
            },
            splitLine: {
              show: this.showYAxisSplitLine,
              lineStyle: {
                color: this.splitLineColor
              }
            },
            splitNumber: this.yAxisSplitNumber
          },
          {
            type: 'value',
            name: '电量',
            position: 'right',
            axisLabel: {
              fontSize: this.axisLabelFontSize,
              color: this.rightAxisLabelColor,
              formatter: (value) => {
                return this.showAxisUnit ? `${value} ${this.batteryUnit}` : value;
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            data: [399, 552, 820, 932, 1901, 2934, 3290, 4200, 5330, 6000, 5500, 4800, 4200, 3800, 3290, 2934, 1901, 1600, 1200, 932, 820, 552, 399, 350],
            type: 'line',
            smooth: this.smooth,
            showSymbol: this.showSymbol,
            symbolSize: this.symbolSize,
            lineStyle: {
              width: this.lineWidth,
              color: this.lineColor
            },
            itemStyle: {
              color: this.lineColor
            }
          },
          {
            name: '电量',
            type: 'bar',
            yAxisIndex: 1,
            data: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0.5, 0.2],
            barWidth: '30%',
            itemStyle: {
              color: '#FFB800'
            }
          }
        ],
        
      };
      chart.setOption(option);
      chart.resize();
    },
    handleResize() {
      const chart = echarts.getInstanceByDom(this.$refs.chartContainer);
      if (chart) {
        chart.resize();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
/* 图表包装器样式 */
.chart-wrapper {
  display: block;
  height: 100%;
  width: 100%;
  padding: 1px;
  /* 添加内边距确保边框可见 */
  box-sizing: border-box;

  /* 图表容器样式 */
  .chart-container {
    height: 100%;
    width: 100%;
    position: relative;
    /* 添加相对定位以确保canvas正确定位 */
  }
  
  .el-tabs__active-bar{
    background-color: #fff !important;
    color: #fff;
  }
  /* 使用深度选择器确保样式能够作用到echarts生成的canvas元素 */
  :deep(.chart-container canvas) {
    height: 100% !important;
    width: 100% !important;
  }
}
</style>
